// import 'package:flutter/material.dart';
// import 'package:flutter_form_builder/flutter_form_builder.dart';
// import 'package:graphview/GraphView.dart' as GF;
// import 'package:ichinesereader/constants.dart';
// import 'package:ichinesereader/controller/cache.dart';
// import 'package:ichinesereader/controller/evaluation.dart';
// import 'package:ichinesereader/models/common/LevelOption.dart';
// import 'package:ichinesereader/models/evaluation/evaluationSkillType.dart';
// import 'package:ichinesereader/models/evaluation/skillPointsResult.dart';
// import 'package:ichinesereader/pages/common/circularImage.dart';
// import 'package:ichinesereader/utils/helper.dart';
// import 'package:syncfusion_flutter_gauges/gauges.dart';
// import 'package:get/get.dart';
// import 'package:ichinesereader/utils/log.dart';
// import 'package:hive_flutter/hive_flutter.dart';
// import '../../themes/appTheme.dart';

// class EvaluationLinguisticSkillsTreeGraph extends StatefulWidget {
//   EvaluationLinguisticSkillsTreeGraph({Key? key}) : super(key: key);

//   @override
//   EvaluationLinguisticSkillsTreeGraphState createState() =>
//       EvaluationLinguisticSkillsTreeGraphState();
// }

// class EvaluationLinguisticSkillsTreeGraphState
//     extends State<EvaluationLinguisticSkillsTreeGraph> {
//   final EvaluationController controller = Get.find();
//   final box = Hive.box('appconfig');
//   final GF.BuchheimWalkerConfiguration builder =
//       GF.BuchheimWalkerConfiguration();
//   var graph = GF.Graph()..isTree = true;
//   late List<SkillPointsDataTree> _evaluationSkillsDataTree;
//   String _skillType = Constants.evaluationSkillTypes[0].skill.toString();
//   String _classId = '';
//   bool isTeacher = false;
//   String _currentLevel = '1';

//   @override
//   void initState() {
//     builder
//       ..siblingSeparation = (20)
//       ..levelSeparation = (20)
//       ..subtreeSeparation = (20)
//       ..orientation = (GF.BuchheimWalkerConfiguration.ORIENTATION_LEFT_RIGHT);

//     isTeacher = box.get(CacheManagerKey['nanhairole'].toString()) ==
//         Constants.NanhaiRole_Teacher;
//     if (isTeacher) {
//       _classId = box.get(CacheManagerKey['currentclass'].toString());
//     } else {
//       _classId = '';
//     }

//     try {
//       if (isTeacher) {
//         _currentLevel =
//             (box.get(CacheManagerKey['eveluationlevel'].toString()) as double)
//                 .toInt()
//                 .toString();
//       } else {
//         _currentLevel = int.tryParse(
//                 box.get("UserLevel").toString().replaceAll('level', ''))
//             .toString();
//       }
//     } catch (error) {
//       box.put(CacheManagerKey['eveluationlevel'].toString(), 1);
//       _currentLevel = '1';
//     }

//     Future.delayed(Duration(milliseconds: 200), () {
//       controller.fetchEvaluationSkillPointsData(_classId, _currentLevel);
//     });

//     super.initState();
//   }

//   @override
//   void dispose() {
//     super.dispose();
//   }

//   void setSkillType(String type) {
//     setState(() {
//       _skillType = type;
//     });
//   }

//   void _buildGraph(String type) {
//     graph = GF.Graph()..isTree = true;
//     try {
//       SkillPointsDataTree rootTree = this
//           ._evaluationSkillsDataTree
//           .where((tree) => tree.name == type)
//           .first;
//       final rootNode = GF.Node.Id(rootTree);
//       if (rootTree.skills!.isNotEmpty) {
//         rootTree.skills?.forEach((elementTree) {
//           var subNode = GF.Node.Id(elementTree);
//           graph.addEdge(rootNode, subNode);
//           if (elementTree.skills!.isNotEmpty) {
//             elementTree.skills?.forEach((elementSubTree) {
//               var subItemNode = GF.Node.Id(elementSubTree);
//               graph.addEdge(subNode, subItemNode);
//             });
//           }
//         });
//       }
//     } catch (error) {
//       graph = GF.Graph()..isTree = true;
//       Log.debug('teacher/student evaluation skills graph: $error');
//     }
//   }

//   buildFloatingActionButtons() {
//     List<EvaluationSkillType> skillTypes =
//         Constants.evaluationSkillTypes.take(2).toList();

//     return Column(
//       mainAxisAlignment: MainAxisAlignment.center,
//       children: skillTypes
//           .map((state) => Padding(
//                 padding: const EdgeInsets.only(bottom: 8.0),
//                 child: SizedBox(
//                   width: 45.0,
//                   height: 45.0,
//                   child: FloatingActionButton(
//                       heroTag: state.skill.toString(),
//                       tooltip: state.skill!.tr,
//                       onPressed: () {
//                         setSkillType(state.skill.toString());
//                       },
//                       elevation: 5,
//                       splashColor: Colors.grey,
//                       child: Image.asset(
//                         state.image.toString(),
//                         width: 50,
//                         height: 50,
//                       )),
//                 ),
//               ))
//           .toList(),
//     );
//   }

//   @override
//   Widget build(BuildContext context) {
//     Log.debug(
//         'Build evaluation linguistic skills treeview teacher/student graph');
//     box.put('SkillType', 'LanguageSkill');
//     ///////////Language Skills页面//////////////////
//     return Scaffold(
//         backgroundColor: Colors.transparent,
//         floatingActionButton: buildFloatingActionButtons(),
//         // FloatingActionButtonsEvaluationSkills(isProficiency: false),
//         floatingActionButtonLocation: FloatingActionButtonLocation.miniEndTop,
//         body: Column(
//           mainAxisSize: MainAxisSize.max,
//           crossAxisAlignment: CrossAxisAlignment.start,
//           children: [
//             ///////椭圆形级数选项区//////////////
//             Container(
//               decoration: BoxDecoration(
//                 color: Get.isDarkMode
//                     ? AppTheme.colors.darkTheme2
//                     : Colors.white.withOpacity(0.3),
//                 borderRadius: BorderRadius.circular(3.0),
//               ),
//               child: Wrap(
//                 alignment: WrapAlignment.spaceBetween,
//                 crossAxisAlignment: WrapCrossAlignment.center,
//                 children: [
//                   Padding(
//                     padding: const EdgeInsets.only(left: 12.0),
//                     child: FormBuilderChoiceChip(
//                       spacing: 3.0,
//                       alignment: WrapAlignment.start,
//                       labelPadding: EdgeInsets.symmetric(
//                         horizontal: 12.0,
//                       ),
//                       selectedColor: Get.isDarkMode
//                           ? Colors.white
//                           : Get.theme.primaryColorDark.withOpacity(0.9),
//                       elevation: 1.0,
//                       backgroundColor: Colors.transparent,
//                       initialValue: Constants.levelEvaluationOptions
//                           .where((element) =>
//                               element.value
//                                   .toString()
//                                   .replaceAll('level', '') ==
//                               _currentLevel.toString())
//                           .first,
//                       //elevation: 0.5,
//                       decoration: InputDecoration(
//                         //labelText: 'Levels',
//                         labelStyle: Get.theme.textTheme.labelSmall,
//                         border: InputBorder.none,
//                       ),
//                       name: 'level_filter_chip',
//                       onChanged: (value) {
//                         if (value == null) return;
//                         var item = value as LevelOption;
//                         controller.fetchEvaluationSkillPointsData(_classId,
//                             item.value.toString().replaceAll('level', ''));
//                         _currentLevel =
//                             item.value.toString().replaceAll('level', '');
//                       },
//                       options: Constants.levelEvaluationOptions
//                           .map((level) => FormBuilderChipOption<LevelOption>(
//                                 value: level,
//                                 child: Text(
//                                   level.label
//                                       .toString()
//                                       .replaceAll('Level 0', 'N/A')
//                                       .replaceAll('Level ', ''),
//                                   style: TextStyle(
//                                     fontSize: 15,
//                                     fontWeight: FontWeight.bold,
//                                     color: hexStringToHexInt(
//                                         level.color.toString()),
//                                     letterSpacing: 0,
//                                   ),
//                                 ),
//                               ))
//                           .toList(),
//                     ),
//                   ),
//                   // Container(
//                   //   width: 250,
//                   //   child: FormBuilderChoiceChip(
//                   //     decoration: InputDecoration.collapsed(
//                   //       hintText: '',
//                   //       border: InputBorder.none,
//                   //     ),
//                   //     labelStyle: TextStyle(
//                   //       color: Theme.of(context).primaryColorLight,
//                   //       fontSize: 15,
//                   //       letterSpacing: 0.8,
//                   //     ),
//                   //     selectedColor: Get.isDarkMode
//                   //         ? (Colors.white)
//                   //         : Theme.of(context).primaryColorDark,
//                   //     name: 'evaluation_skill_types',
//                   //     onChanged: (value) {
//                   //       if (value == null) return;
//                   //       var skillType = value as EvaluationSkillType;
//                   //       setState(() {
//                   //         _skillType = skillType.skill.toString();
//                   //       });
//                   //     },
//                   //     initialValue: Constants.evaluationSkillTypes[0],
//                   //     options: Constants.evaluationSkillTypes
//                   //         .take(2)
//                   //         .map((state) => FormBuilderChipOption<EvaluationSkillType>(
//                   //             value: state,
//                   //             child: Image.asset(
//                   //               state.image.toString(),
//                   //               width: 36,
//                   //               height: 36,
//                   //             )))
//                   //         .toList(),
//                   //   ),
//                   // ),
//                 ],
//               ),
//             ),
//             Expanded(
//               child: controller.obx(
//                 (data) {
//                   _evaluationSkillsDataTree =
//                       controller.evaluationSkillPointsDataTree;
//                   if (_evaluationSkillsDataTree.isNotEmpty) {
//                     _buildGraph(_skillType);
//                   }
//                   if (graph.nodes.isNotEmpty) {
//                     ///////树状图的背景//////
//                     return Container(
//                       margin: EdgeInsets.only(top: 9.0),
//                       padding: EdgeInsets.only(top: 45.0, left: 12.0),
//                       decoration: BoxDecoration(
//                         borderRadius: BorderRadius.circular(3.0),
//                         color: Get.isDarkMode
//                             ? AppTheme.colors.darkTheme2
//                             : Colors.white.withOpacity(0.3),
//                       ),
//                       child: InteractiveViewer(
//                           constrained: false,
//                           boundaryMargin: EdgeInsets.all(100),
//                           minScale: 0.01,
//                           maxScale: 2.5,
//                           scaleEnabled: false,
//                           panEnabled: true,
//                           child: GF.GraphView(
//                             graph: graph,
//                             animated: true,
//                             algorithm: GF.BuchheimWalkerAlgorithm(
//                                 builder, GF.TreeEdgeRenderer(builder)),
//                             paint: Paint()
//                               ..color = Colors.teal
//                               ..strokeWidth = 1
//                               ..style = PaintingStyle.stroke,
//                             builder: (GF.Node node) {
//                               var a = node.key!.value as SkillPointsDataTree?;
//                               return rectangleWidget(a);
//                             },
//                           )),
//                     );
//                   } else {
//                     Log.debug('graph null error');
//                     return Text('');
//                   }
//                 },
//                 onEmpty: Center(child: Text('Data not available ...'.tr)),
//                 onLoading: Center(
//                     child: CircularProgressIndicator(
//                   backgroundColor: Get.theme.primaryColorDark,
//                   strokeWidth: 9.0,
//                 )),
//               ),
//             )
//           ],
//         ));
//   }

//   Widget rectangleWidget(dynamic node) {
//     SkillPointsDataTree tree = node as SkillPointsDataTree;
//     double _accuracy = 0;

//     if (tree.skills != null && tree.skills!.isNotEmpty) {
//       double _totalAccuracy = 0;
//       tree.skills?.forEach((skill) {
//         _accuracy = skill.correct != 0 && skill.total != 0
//             ? (skill.correct! / skill.total!) * 100
//             : 0;
//         _totalAccuracy = _totalAccuracy + _accuracy;
//       });
//       _accuracy = _totalAccuracy / tree.skills!.length;
//     } else {
//       _accuracy = tree.correct != 0 && tree.total != 0
//           ? (tree.correct! / tree.total!) * 100
//           : 0;
//     }

//     String image =
//         'https://resources.ichinesereader.com/media/evaluation/bubble_yellow_${_accuracy.toInt()}.gif';

//     return InkWell(
//       /////////////////////单个技能选项方块////////
//       child: Container(
//           margin: EdgeInsets.all(12.0),
//           padding: EdgeInsets.all(21.0),
//           decoration: BoxDecoration(
//             color:
//                 Get.isDarkMode ? Colors.black : Colors.white.withOpacity(0.6),
//             borderRadius: BorderRadius.circular(12.0),
//             boxShadow: [
//               BoxShadow(
//                 blurRadius: 9.0,
//                 spreadRadius: 1.0,
//                 color: Get.isDarkMode
//                     ? Colors.transparent
//                     : Get.theme.primaryColor.withOpacity(0.8),
//                 offset: Offset(12.0, 12.0),
//               ),
//             ],
//           ),
//           child: Row(
//             children: [
//               Container(
//                 width: 60,
//                 height: 60,
//                 child: SfRadialGauge(
//                   axes: [
//                     RadialAxis(
//                         minimum: 0,
//                         maximum: 100,
//                         startAngle: 0,
//                         endAngle: 360,
//                         interval: 1,
//                         showTicks: false,
//                         showLabels: false,
//                         axisLineStyle: AxisLineStyle(thickness: 6),
//                         pointers: <GaugePointer>[
//                           RangePointer(
//                               value: _accuracy,
//                               width: 6,
//                               color: Colors.tealAccent[200],
//                               cornerStyle: CornerStyle.bothCurve)
//                         ],
//                         showFirstLabel: false,
//                         annotations: <GaugeAnnotation>[
//                           GaugeAnnotation(
//                               widget: NonCacheCircularImage(image, 60),
//                               angle: 50,
//                               positionFactor: 0)
//                         ])
//                   ],
//                 ),
//               ),
//               SizedBox(
//                 width: 9.0,
//               ),
//               //////////格式文字部分//////////////
//               RichText(
//                 text: TextSpan(
//                   children: [
//                     TextSpan(
//                         text: '${tree.name.toString()}\n',
//                         style: TextStyle(
//                             color: Get.isDarkMode
//                                 ? Get.theme.primaryColorDark
//                                 : Colors.black,
//                             fontFamily: 'Montserrat',
//                             fontSize: 15.0)),
//                     TextSpan(
//                         text: 'Correct:  ',
//                         style:
//                             TextStyle(fontSize: 12.0, color: Colors.blueGrey)),
//                     TextSpan(
//                         text: '${tree.correct.toString()}     ',
//                         style: TextStyle(
//                             color: Get.theme.primaryColorDark,
//                             fontSize: 18.0,
//                             fontWeight: FontWeight.bold)),
//                     TextSpan(
//                         text: 'Total:  ',
//                         style:
//                             TextStyle(fontSize: 12.0, color: Colors.blueGrey)),
//                     TextSpan(
//                         text: '${tree.total.toString()}',
//                         style: TextStyle(
//                             color: Get.theme.primaryColorDark,
//                             fontSize: 18.0,
//                             fontWeight: FontWeight.bold)),
//                   ],
//                 ),
//               ),
//             ],
//           )),
//     );
//   }
// }
